<template lang="html">
    <div>
        <div class="left dv" @click = "substract">-</div>
        <div class="center dv " v-text="count"></div>
        <div class="right dv" @click = "add">+</div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                count:1
            }
        },
        methods:{
            add(){
                this.count++;
                this.senddata();
            },
            substract(){
                this.count--;
                if(this.count<=1){
                    this.count = 1;
                }
                this.senddata();
            },
            senddata(){
                this.$emit('send',this.count);
            }
        }
    }
</script>
<style scoped>
    #temp .dv{
        display: inline-block;
        width:26px;
        border:1px solid #ccc;
        padding:4px;
        box-sizing: border-box;
        text-align: center;
        font-size: 14px;
    }
</style>